<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商务模块管理</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./layui/css/layui.css" rel="stylesheet" />
	</head>

	<body>
		<div style="padding: 16px;">
			<table class="layui-hide" id="test" lasy-filter="test"></table>
		</div>
		<!-- 添加表单开始 -->
		<div style="display: none;" id="save">
			<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">

				<div class="layui-col-sm6">
					<div class="layui-form-item">
						<label class="layui-form-label">商品名</label>
						<div class="layui-input-block">
							<input type="text" name="goods_name" lay-verify="required" placeholder="请输入商品名"
								autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-sm6">
					<div class="layui-form-item">
						<label class="layui-form-label">价格</label>
						<div class="layui-input-block">
							<!-- 提交时为数值型 -->

							<input type="number" lay-affix="number" name="goods_price" lay-verify="required"
								placeholder="请输入价格" value="0.00" lay-precision="2" autocomplete="off"
								class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-sm6">
					<div class="layui-form-item">
						<label class="layui-form-label">数量</label>
						<div class="layui-input-block">
							<input type="number" lay-affix="number" name="goods_num" lay-verify="required"
								placeholder="请输入数量" value="0" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<!-- 图片上传 -->

				<div class="layui-col-sm6">
					<button type="button" class="layui-btn" id="ID-upload-demo-btn-add">
						<i class="layui-icon layui-icon-upload"></i> 单图片上传
					</button>
					<div style="width: 132px;">
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
							<div id="ID-upload-demo-text"></div>
						</div>
						<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
							<div class="layui-progress-bar" lay-percent=""></div>
						</div>
					</div>
					<div class="layui-form-item">
						<!-- 图片域被隐藏，上传图像时添加val值 -->
						<input type="hidden" name="goods_img" id="image">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>

						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<!-- 添加表单结束 -->
		<!-- 编辑表单开始 -->
		<div style="display: none;" id="update">
			<form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm">
				<div class="layui-col-sm4">
					<div class="layui-form-item">
						<label class="layui-form-label">商品id</label>
						<div class="layui-input-block">
							<input type="text" name="id" lay-verify="required" readonly autocomplete="off"
								class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-sm4">
					<div class="layui-form-item">
						<label class="layui-form-label">商品名</label>
						<div class="layui-input-block">
							<input type="text" name="goods_name" lay-verify="required" placeholder="请输入商品名"
								autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-sm4">
					<div class="layui-form-item">
						<label class="layui-form-label">价格</label>
						<div class="layui-input-block">
							<input type="number" lay-affix="number" name="goods_price" lay-verify="required"
								placeholder="请输入价格" value="0.00" lay-precision="2" autocomplete="off"
								class="layui-input">
						</div>
					</div>
				</div>
				<div class="layui-col-sm4">
					<div class="layui-form-item">
						<label class="layui-form-label">数量</label>
						<div class="layui-input-block">
							<input type="number" lay-affix="number" name="goods_num" lay-verify="required"
								placeholder="请输入数量" value="0" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<!-- 图片上传 -->

				<div class="layui-col-sm4">
					<button type="button" class="layui-btn" id="ID-upload-demo-btn-edit">
						<i class="layui-icon layui-icon-upload"></i> 单图片上传
					</button>
					<div style="width: 132px;">
						<div class="layui-upload-list">
							<img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
							<div id="ID-upload-demo-text"></div>
						</div>
						<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
							<div class="layui-progress-bar" lay-percent=""></div>
						</div>
					</div>
					<div class="layui-form-item">
						<!-- 图片域被隐藏，上传图像时添加val值 -->
						<input readonly="true" name="goods_img" id="image">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit lay-filter="demo2">修改</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		<!-- 添加或编辑结束 -->
		<script src="seq.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
				<button class="layui-btn layui-btn-sm" lay-event="addData">添加</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
					<span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
					<i class="layui-icon layui-icon-down layui-font-12"></i>
				</button>
			</div>
		</script>
		<script type="text/html" id="toolDemo">
			<div class="layui-clear-space">
				<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
				<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>

			</div>
		</script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['table', 'dropdown'], function() {
				var $ = layui.$;
				var table = layui.table;
				var dropdown = layui.dropdown;
				var $ = layui.$;
				var layer = layui.layer;
				var util = layui.util;
				var form = layui.form;

				// 创建渲染实例
				table.render({
					elem: '#test',
					url: baseUrl + 'goods/', // 此处为静态模拟数据，实际使用时需换成真实接口
					type: 'GET',
					toolbar: '#toolbarDemo',
					defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
						title: '提示',
						layEvent: 'LAYTABLE_TIPS',
						icon: 'layui-icon-tips',
						onClick: function(obj) { // 2.9.12+
							layer.alert('自定义工具栏图标按钮');
						}
					}],
					height: 'full-35', // 最大高度减去其他容器已占有的高度差
					css: [ // 重设当前表格样式
						'.layui-table-tool-temp{padding-right: 145px;}'
					].join(''),
					cellMinWidth: 80,
					page: true,
					headers: {
						'Access-Control-Allow-Origin': '*'
					},
					request: {
						pageName: 'pageNum', // 页码的参数名称，默认：page
						limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
					},
					// response: {
					// 	statusname: 'code', // 数据状态的字段名称，默认：code
					// 	statusCode: 200, // 数据返回的接口状态码，默认：0

					//   },
					// 将原始数据解析成 table 组件所规定的数据格式
					parseData: function(res) {
						return {
							"code": res.code, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.result.total, //解析数据长度
							"data": res.result.rows //解析数据列表
						};
					},
					// contentType: "application/json",
					cols: [
						[{
								type: 'checkbox',
								fixed: 'left'
							},
							{
								field: 'id',
								fixed: 'left',
								title: '商品ID',
								sort: true,
								totalRow: '合计：'
							},
							{
								field: 'goods_name',
								title: '商品名'
							},
							{
								field: 'goods_price',

								title: '价格',
								sort: true
							},
							{
								field: 'goods_num',
								title: '数量',
								sort: true
							},
							{
								field: 'goods_img',
								title: '图像URL',

							},
							{
								fixed: 'right',
								title: '操作',

								minWidth: 150,
								templet: '#toolDemo'
							}
						]
					],
					done: function() {
						var id = this.id;

						// 行模式
						dropdown.render({
							elem: '#rowMode',
							data: [{
								id: 'default-row',
								title: '单行模式（默认）'
							}, {
								id: 'multi-row',
								title: '多行模式'
							}],
							// 菜单被点击的事件
							click: function(obj) {
								var checkStatus = table.checkStatus(id)
								var data = checkStatus.data; // 获取选中的数据
								switch (obj.id) {
									case 'default-row':
										table.reload('test', {
											lineStyle: null // 恢复单行
										});
										layer.msg('已设为单行');
										break;
									case 'multi-row':
										table.reload('test', {
											// 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
											lineStyle: 'height: 95px;'
										});
										layer.msg('即通过设置 lineStyle 参数可开启多行');
										break;
								}
							}
						});
					},
					error: function(res, msg) {
						console.log(res, msg)
					}
				});

				// 工具栏事件
				table.on('toolbar(test)', function(obj) {

					var id = obj.config.id;
					var checkStatus = table.checkStatus(id);
					var othis = lay(this);
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;
							layer.alert(layui.util.escape(JSON.stringify(data)));
							break;
						case 'getData':
							var getData = table.getData(id);
							console.log(getData);
							layer.alert(layui.util.escape(JSON.stringify(getData)));
							break;
						case 'addData':
							layer.open({
								title: '添加 ',
								type: 1,
								area: ['80%', '80%'],
								content: $("#save"),
								success: function(index) {
									// 表单数据置空
									$("#dataFrm")[0].reset()
								}
							});
							break;
					};
				});
				// // 表头自定义元素工具事件 --- 2.8.8+
				// table.on('colTool(test)', function(obj){
				//   var event = obj.event;
				//   console.log(obj);
				//   if(event === 'email-tips'){
				//     layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
				//       title: '当前列属性配置项'
				//     });
				//   }
				// });

				// 触发单元格工具事件
				table.on('tool(test)', function(obj) { // 双击 toolDouble
					var data = obj.data; // 获得当前行数据

					if (obj.event === 'edit') {
						var index = layer.open({
							title: '编辑' + data.id,
							type: 1,
							area: ['80%', '80%'],
							content: $("#update"),
							success: function(index) {
								// 调取本行数据
								form.val("dataFrm", data);

							}
						});


					} else if (obj.event === 'del') {
						layer.confirm('真的删除行 [id: ' + data.id + '] 么', function(index) {
							obj.del(); // 删除对应行（tr）的DOM结构
							layer.close(index);
							// 向服务端发送删除指令
							$.ajax({
								url: baseUrl + 'goods/' + data.id + '/off',
								type: 'POST',
								contentType: 'application/json',
								success: function(res) {
									if (res.code === 200) {
										// 删除数据成功
										let msg = res.message;
										layer.alert(msg, {
											title: '数据删除'
										});
										window.location.reload()
									} else {
										let msg = res.message;
										layer.alert(msg, {
											title: '数据删除'
										});
									}
									// 如果删除数据失败

								},
								error: function(err) {

									console.log('error', err)
								}
							});
						});
					};
				});
				// 单元格编辑事件
				table.on('edit(test)', function(obj) {
					var field = obj.field; // 得到字段
					var value = obj.value; // 得到修改后的值
					var data = obj.data; // 得到所在行所有键值
					// 值的校验
					if (field === 'email') {
						if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)) {
							layer.tips('输入的邮箱格式不正确，请重新编辑', this, {
								tips: 1
							});
							return obj.reedit(); // 重新编辑 -- v2.8.0 新增
						}
					}
					// 编辑后续操作，如提交更新请求，以完成真实的数据更新
					// …
					layer.msg('编辑成功', {
						icon: 1
					});

					// 其他更新操作
					var update = {};
					update[field] = value;
					obj.update(update);
				});
			});
		</script>
		<script>
			layui.use(['form', 'util'], function() {
				var form = layui.form;
				var upload = layui.upload;
				var layer = layui.layer;
				var util = layui.util;
				var element = layui.element;
				var $ = layui.$;
				// 图片上传

				// 添加物品单图片上传
				var uploadInst = upload.render({
					elem: '#ID-upload-demo-btn-add',
					url: baseUrl + 'goods/upload', // 实际使用时改成您自己的上传接口即可。
					before: function(obj) {
						// 预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
						});

						element.progress('filter-demo', '0%'); // 进度条复位
						layer.msg('上传中', {
							icon: 16,
							time: 0
						});
					},
					done: function(res) {
						// 若上传失败
						if (res.code > 0) {
							console.log(res)
							return layer.msg('上传失败');
						}
						// 上传成功的一些操作 image域写入图片路径
						console.log(res.result.good_img)
						$('#image').val(res.result.good_img)
						// …
						$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
					},
					error: function() {
						// 演示失败状态，并实现重传
						var demoText = $('#ID-upload-demo-text');
						demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
						);
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					},
					// 进度条
					progress: function(n, elem, e) {
						element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
						if (n == 100) {
							layer.msg('上传完毕', {
								icon: 1
							});
						}
					}
				});

// 编辑菜单单图片上传
				var uploadInst = upload.render({
					elem: '#ID-upload-demo-btn-edit',
					url: baseUrl + 'goods/upload', // 实际使用时改成您自己的上传接口即可。
					before: function(obj) {
						// 预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
						});

						element.progress('filter-demo', '0%'); // 进度条复位
						layer.msg('上传中', {
							icon: 16,
							time: 0
						});
					},
					done: function(res) {
						// 若上传失败
						if (res.code > 0) {
							console.log(res)
							return layer.msg('上传失败');
						}
						// 上传成功的一些操作 image域写入图片路径
						console.log(res.result.good_img)
						$('#image').val(res.result.good_img)
						// …
						$('#ID-upload-demo-text').html(''); // 置空上传失败的状态
					},
					error: function() {
						// 演示失败状态，并实现重传
						var demoText = $('#ID-upload-demo-text');
						demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
						);
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					},
					// 进度条
					progress: function(n, elem, e) {
						element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
						if (n == 100) {
							layer.msg('上传完毕', {
								icon: 1
							});
						}
					}
				});


				// 提交事件
				form.on('submit(demo1)', function(data) {
					var formData = data.field; // 获取表单字段值
					// 显示填写结果，仅作演示用
					layer.alert(JSON.stringify(formData), {
						title: '当前填写的字段值'
					});
					formData.goods_price = Number(formData.goods_price)
					formData.goods_num = Number(formData.goods_num)
					// 此处可执行 Ajax 等操作
					$.ajax({
						url: baseUrl + 'goods/add',
						type: 'POST',
						contentType: 'application/json',
						data: JSON.stringify(formData),
						success: function(res) {
							// console.log('success', res)
							if (res.code === 200) {
								// 注册成功
								let msg = res.message;
								layer.alert(msg, {
									title: '添加商品'
								});
							} else {
								let msg = res.message;
								layer.alert(msg, {
									title: '添加商品'
								});
							}
						},
						error: function(err) {
							layer.alert(err.message, {
								title: '添加商品'});
							console.log('error', err.message)
						}
					});
					return false; // 阻止默认 form 跳转
				});

				// 修改事件
				form.on('submit(demo2)', function(data) {
					var formData = data.field; // 获取表单字段值
					// 显示填写结果，仅作演示用
					// layer.alert(JSON.stringify(formData), {
					// 	title: '当前填写的字段值'
					// });
					formData.goods_price = Number(formData.goods_price)
					formData.goods_num = Number(formData.goods_num)
					// 此处可执行 Ajax 等操作

					$.ajax({
						url: baseUrl + 'goods/' + formData.id,
						type: 'PUT',
						contentType: 'application/json',
						data: JSON.stringify(formData),
						success: function(res) {
							// console.log('success', res)
							if (res.code === 200) {
								// 修改成功								
								let msg = res.message;
								layer.alert(msg, {
									title: '修改'
								});

								// 获得frame索引
								var index = parent.layer.getFrameIndex(window.name);
								//关闭当前frame
								parent.layer.close(index);
								//修改成功后刷新父界面
								window.parent.location.reload();
							} else {
								let msg = res.message;
								layer.alert(msg, {
									title: '修改'
								});
							}
						},
						error: function(err) {
							console.log('error', err)
						}
					});
					return false; // 阻止默认 form 跳转
				});

			});
		</script>


	</body>

</html>